<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<title></title>
	</head>
	<style type="text/css">
		*{padding: 0; margin: 0;}
		html,body{
			width: 100%; height: 100%;
			overflow: hidden;
			font-size: 0.5rem;
		}
		.page{
			width: 100%; height: 100%;
			position: relative;
		}
		.page div{
			background: white;
			position: absolute;
			left: 0; top: 0;
			width: 100%; height: 100%;
			overflow: auto;
			
		}
		.nav {
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			document.documentElement.style.fontSize = 100 * document.documentElement.offsetWidth/640 + "px";
			container = document.querySelector("#container");
		}
		window.onhashchange = function(){
			//AJAX
			var hash = window.location.hash; 		
			var curpage = document.querySelector(hash.replace("\/",""));
			container.appendChild(curpage);
		}
	</script>
	<body>
		<div class="nav">
			<a href="#/page01">页面A</a>
			<a href="#/page02">页面B</a>
			<a href="#/page03">页面C</a>
			<a href="#/page04">页面D</a>
		</div>
		
		<div id="container" class="page">
			<div id="page01">
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
				你现在访问的是第一个页面，点击回退，到上一个页面
			</div>
			<div id="page02">
				你现在访问的是第二个页面，点击回退，到上一个页面
			</div>
			<div id="page03">
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
				你现在访问的是第三个页面，点击回退，到上一个页面
			</div>
			<div id="page04">
				你现在访问的是第四个页面，点击回退，到上一个页面
			</div>
		</div>
	</body>
</html>
